<html>
<head lang="en">
    <meta charset="utf-8">
    <title>ECharts</title>
    <!--定义id选择器-->
    <style type="text/css">
        #main{height:400px;width: 1000px}
    </style>
    <script src="echarts.js"></script>
</head>
<body>
<div id="main">

</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化 echarts 实例并绘制图表。
    var myChart = echarts.init(document.getElementById("main"));
    // 指定图表的配置项和数据
    var option ={
            title:{
                text:'男女身高体重比例',
                subtext:'数据虚构'
            },
            tooltip:{
                trigger:'axis',
                axisPointer:{
                    show:true,
                    type:'cross',
                    lineStyle:{
                        type:'dashed',
                        width:1
                    }
                }
            },
            legend:{
                data:['男生','女生']
            },
            xAxis:{
                type:'value',
                scale:true,//是否脱离0刻度，设置成 true 后坐标刻度不会强制包含零刻
                axisLabel:{
                    formatter:'{value}cm'
                }
            },
            yAxis:{
                type:'value',
                scale:true,
                axisLabel:{
                    formatter:'{value}kg'
                }
            },
            series:[
                {
                    name:'女生',
                    type:'scatter',
                    data: [
                        [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
                        [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
                        [161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6]
                       
                       

                    ],
                    markPoint:{
                        data:[
                            {type:'max',name:'最大值'},
                            {type:'min',name:'最小值'}
                        ]},
                    markLine:{
                        data:[
                            {type:'average',name:'平均值'}
                        ]
                    }
                },
                {
                    name:'男生',
                    type:'scatter',
                    data: [
                        [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
                        [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6]
                        [174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
                       
                    ],
                    markPoint:{
                        data:[
                            {type:'max',name:'最大值'},
                            {type:'min',name:'最小值'}
                        ]},
                    markLine:{
                        data:[
                            {type:'average',name:'平均值'}
                        ]
                    }
                }
            ]
        };

    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
    
</script>
</body>
</html>
